<template>
	<view class="cont">
		<van-notice-bar left-icon="volume-o" text="爱是无垠的,同情在你我之间流淌。 我们相信,爱是没有边界的。" />
		<img :src="info.petImg" class="bigimg">
		<!-- 宠物信息 -->
		<view class="petinfo">
			<view class="top">
				<text class="name">{{info.petName}}</text>
				<img :src="`../../static/${info.petSex?'man':'woman'}.png`" class="seximg">
				<text class="age">{{info.petAge}}</text>
			</view>
			<view class="middle">
				<text>{{info.petDescr}}</text>
			</view>
			<view class="bottom">
				<van-tag type="warning"
					:style="`background-color:${info.petSterilization?'#fff976a':'#7ecdf8'} ;`">{{info.petSterilization==1?'已绝育':'未绝育'}}</van-tag>
				<van-tag type="warning"
					:style="`background-color:${info.petInisect?'#fff976a':'#7ecdf8'} ;`">{{info.petInisect?'已驱虫':'未驱虫'}}</van-tag>
				<van-tag type="warning"
					:style="`background-color:${info.petVaccine?'#fff976a':'#7ecdf8'} ;`">{{info.petVaccine?'已接种':'未接种'}}</van-tag>
			</view>
			<view class="warning">
				<text>*提醒：如对方向您索要运费、治疗费等，切勿付款！请务必联系审核员核实，以免被骗！</text>
			</view>
		</view>
		<!-- 送养人信息 -->
		<view class="deliverinfo">
			<text class="title">送养人信息</text>
			<view class="d-info">
				<img :src="petuser.deliverAvatar" class="userimg">
				<view class="right">
					<text class="d-name">{{petuser.deliverName}}</text>
					<image src="../../static/tname.jpg" class="tname"></image>
					<view class="d-other">
						<view class="two">
							<van-icon name="phone" color="#1b9d35" /><text>{{petuser.deliverPhone}}</text>
						</view>
						<view class="two">
							<van-icon name="location-o" color="#029df8" /><text>{{petuser.deliverAddress}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<img src="../../static/attention.jpg" class="attention">
		<van-button square style="width: 100vw;height: 50px;font-size: 42rpx;background-color: #f1ad48;color: #ffffff;"
			class="btn" @click="deliver">我要领养</van-button>
	</view>
</template>

<script setup>
	import $http from '../../request/index.js'
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		onLoad
	} from '@dcloudio/uni-app';

	let info = ref('')
	let petuser = ref('')
	let petid = ref('')

	function deliver() { //点击领养
		uni.navigateTo({
			url: '/pages/deliverinfo/deliverinfo?petId=' + petid
		})
	}
	onLoad((id) => { //接收上个页面传过来的id
		console.log('接收传值：', id.petId)
		petid = id.petId
		$http.get(`/pet/${id.petId}`).then(res => { //根据id返回宠物详情
			console.log(res.data)
			info.value = res.data
		})
		$http.get(`/deliver/${id.petId}`).then(res => { //根据id返回送养人详情
			console.log(res)
			petuser.value = res.data
			console.log(petuser.value)
		})

		// mock假数据
		// $http.get(`/id`).then(res => { //根据id返回宠物详情
		// 	console.log(res.data)
		// 	info.value = res.data
		// })
		// $http.get(`/deliver`).then(res => { //根据id返回送养人详情
		// 	console.log(res)
		// 	petuser.value = res.data
		// 	console.log(petuser.value)
		// })
	});
</script>

<style scoped>
	.right {
		height: 200rpx;
		/* background-color: #f6b37c; */
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	.two {
		margin: 0;
		height: 50rpx;
	}

	.userimg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.tname {
		width: 100rpx;
		height: 35rpx;
		margin-left: 40rpx;
	}

	.attention {
		width: 100vw;
		height: 100rpx;
	}

	.deliverinfo {
		width: 100vw;
		height: 280rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #ffffff;
	}

	.title {
		font-size: 34rpx;
		font-weight: bolder;
	}

	.d-other {
		font-size: 30rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		width: 400rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
	}

	.d-info {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.d-info img {
		border-radius: 50%;
	}

	.d-info .right {
		width: 540rpx;
	}

	.d-name {
		font-size: 34rpx;
		font-weight: bolder;
	}

	.cont {
		width: 100vw;
		height: calc(100vh - 88rpx);
		background-color: #efefef;
		overflow-y: scroll;
		padding-bottom: 50px;
	}

	.warning {
		font-size: 20rpx;
		color: #f6b37c;
		margin-top: 20rpx;
	}

	.middle {
		width: 100%;
		height: 100rpx;
		font-size: 24rpx;
		/* margin: 30rpx 0; */
	}

	.petinfo {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin: 0 0 20rpx 0;
	}

	.bigimg {
		width: 100vw;
		height: 500rpx;
	}

	.seximg {
		width: 50rpx;
		height: 50rpx;
		margin: 0 20rpx;
	}

	.bottom {
		width: 300rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.name {
		font-size: 40rpx;
		font-weight: bolder;
	}

	.age {
		font-size: 28rpx;
	}

	.top {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>